<template>
  <div class="main flex between">
    <div class="main-left">
      <div class="title">课程表</div>
      <div class="table">
        <table border="1">
          <tr>
            <td></td>
            <td v-for="item in weekList">
              {{ item }}
            </td>
          </tr>
          <tr
            v-for="(item, index) in subjectList"
            :key="index"
          >
            <td style="min-width: 4em">{{ item.name }}</td>
            <td
              v-for="subject in item.list"
              style="padding: 4px"
            >
              <p>{{ subject?.subject_name }}</p>
              <p>{{ subject?.teacher_name }}</p>
              <p>{{ subject?.clazz_names }}</p>
            </td>
            <td v-for="empty in weekList.length - item.list.length"></td>
          </tr>
        </table>

        <!-- <el-table
          :data="subjectList"
          border
          style="width: 100%; height: 100%"
        >
          <el-table-column prop="name" />
          <el-table-column
            v-for="item in weekList"
            prop="list"
            :label="item"
          >
            <template #default="{ row, $index, column }">
              {{ $index }}
            </template>
          </el-table-column>
        </el-table> -->
      </div>
    </div>
    <div class="main-right">
      <div class="title">作息时间</div>
      <div class="right-div">
        <!-- <div class="flex between item">
          <div>早自习</div>
          <div>07:00:00——07:45:00</div>
        </div> -->
        <div
          class="flex between item"
          v-for="(item, index) in periodList"
        >
          <div>{{ item.name }}</div>
          <div>{{ item.start_time }}——{{ item.end_time }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ElEmpty, ElTable } from "element-plus";
import { clazz } from "@/api/apiData";
import { onMounted, ref, inject, computed } from "vue";
const { deviceDetail } = inject("global-stroe");
const detail = ref();
const weekList = computed(() => detail.value?.week_list || []);
const periodList = computed(() => detail.value?.period_list || []);
const subjectList = computed(() => detail.value?.subject_list || []);

const tableData = computed(() => {
  let periodList =
    detail.value?.period_list.map((item) => ({ period: item.name })) || [];
  console.log(periodList);
  return periodList;
});

onMounted(() => {
  // console.log(deviceDetail.value);
  const room_id = deviceDetail.value?.room_id;
  // console.log("room_id", room_id);
  clazz.schedule.getLessonByRoom({ room_id }).then(({ data }) => {
    console.log("data", data);
    detail.value = data;
  });
});
</script>
<style
  lang="less"
  scoped
>
.main {
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  .main-left {
    width: 1280px;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    .title {
      background: linear-gradient(to right, #fe9a14, #fe774a);
    }
    .table {
      flex: 1;
      padding: 20px;
      box-sizing: border-box;
      overflow: auto;
      table {
        width: 100%;
        text-align: center;
        border-collapse: collapse;
        font-size: 20px;
        td {
          padding: 10px 0;
        }
      }
    }
  }
  .main-right {
    width: 580px;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    .title {
      background: linear-gradient(to right, #56abf9, #5686fc);
    }
    .right-div {
      background: white;
      padding: 10px 60px;
      font-size: 24px;
    }
    .item {
      padding: 14px 0;
    }
  }
}
</style>
